<template>
	<div class="collocation">
		<div class="header">
			<div class="back-icon iconfont">
				&#xe624;
			</div>
			<div class="title">优惠券管理</div>
		</div>
		
		<div class="activity-name">
			<div class="activity-title">
				<span class="title">商品标题</span>
				<span class="length">(4到20个字)</span>
			</div>
			<div class="title-icon">
				<div class="iconfont">&#xe650;</div>
			</div>
		</div>

		<group label-width="5.5em" label-margin-right="2em" >
	    	<popup-radio  title="类型" :options="type" v-model="currentType">
	    		<p slot="popup-header" class="vux-1px-b demo3-slot" style="text-align: center;padding: 8px 0;color: #888;">请选择</p>
	    	</popup-radio>  	    	
		</group>
		<div class="content">
			<div class="content-item vux-1px-b">
				<div class="item-left">
					<img class="item-img" src="../../assets/images/activity/note.png" alt="" />
				</div>
				<div class="item-right">
					<div class="item-title">夏季遮阳帽</div>
					<div class="item-price">原价:￥120</div>
				</div>
				<div class="iconfont" @click="handleDelClick">
					&#xe619;
				</div>
			</div>
			<div class="content-item vux-1px-b">
				<div class="item-left">
					<img class="item-img" src="../../assets/images/activity/note.png" alt="" />
				</div>
				<div class="item-right">
					<div class="item-title">夏季遮阳帽</div>
					<div class="item-price">原价:￥120</div>
				</div>
				<div class="iconfont">
					&#xe619;
				</div>
			</div>
			<div class="content-item vux-1px-b">
				<div class="item-left">
					<img class="item-img" src="../../assets/images/activity/note.png" alt="" />
				</div>
				<div class="item-right">
					<div class="item-title">夏季遮阳帽</div>
					<div class="item-price">原价:￥120</div>
				</div>
				<div class="iconfont">
					&#xe619;
				</div>
			</div>
			<div class="content-item vux-1px-b">
				<div class="item-left">
					<img class="item-img" src="../../assets/images/activity/note.png" alt="" />
				</div>
				<div class="item-right">
					<div class="item-title">夏季遮阳帽</div>
					<div class="item-price">原价:￥120</div>
				</div>
				<div class="iconfont">
					&#xe619;
				</div>
			</div>

		</div>
		<div class="price-content">
			<div class="price-item vux-1px-b">
				<div class="title">原价</div>
				<div class="price-num">￥:99.99</div>
			</div>
			<div class="price-item vux-1px-b">
				<div class="title">搭配价</div>
				<div class="price-num">￥:199.99</div>
			</div>
		</div>
		<confirm :value="isAlert" :content="'确定删除吗？'"></confirm>
		<div class="btn btn-del">删除</div>
		<div class="btn btn-add">添加</div>
		<div class="confirm-btn">添加优惠券</div>
	</div>
</template>

<script type="text/javascript">
	import { Confirm , PopupRadio , GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, ChinaAddressData, XAddress, XTextarea, XSwitch } from 'vux'
	export default{
		name : 'collocationBuy',
		data(){
			return{
				currentType:'',
				type:['男装','女装'],
				isAlert:false
			}
		},
		methods:{
			handleDelClick(){
				this.isAlert = true
			}
		},
		components:{
			Group,
	        GroupTitle,
	        Cell,
	        XInput,
	        Selector,
	        PopupPicker,
	        XAddress,
	        Datetime,
	        XNumber,
	        XTextarea,
	        XSwitch,
	        PopupRadio,
	        Confirm 
		}

	}
</script>
<style lang="less" scoped>
	@import '~vux/src/styles/1px.less';
	@comColor:#ff1351;
	.collocation{
		text-align: left;
		.header{
			position: relative;
			display:flex;
			height:.9rem;
			line-height: .9rem;
			color:#fff;
			background:@comColor;
			font-size:.34rem;		
			.back-icon{
				position: absolute;
				left: 0;
				top: 0;
				height: .9rem;
				padding:0 .2rem;
			}
			.title{
				flex:1;
				text-align: center;
			}
		}
		
		.activity-name{
			overflow: hidden;
			display: flex;
			margin-top: .2rem;
			height: 1rem;
			background: #fff;
			.activity-title{
				flex: 1;
				.title,.length{
					display: inline-block;
					color: #a4a4a4;
					line-height: 1rem;
				}
				.title{
					padding-left: .26rem;
					font-size: .45rem;
				}
				.length{
					margin-left: .32rem;
					font-size: .28rem;
				}
			}
			.title-icon{
				margin-top: .18rem;
				height: .64rem;
				width: .64rem;
				line-height: .64rem;
				text-align: center;
				margin-right: .26rem;
				background: #f5f5f5;
				border-radius: 50%;
				font-size: .34rem;
			}
		}
		.content{
			overflow: hidden;
			padding: 0 .3rem;
			background: #fff;
			.content-item{
				position: relative;
				display: flex;
				height: 1.4rem;
				.item-left{
					margin-top: .2rem;
					width: 1rem;
					height: 1rem;
					.item-img{
						width: 100%;
					}
				}
				.item-right{
					flex: 1;
					margin-left: .2rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.item-title{
						line-height: .5rem;
					}
					.item-price{
						line-height: .4rem;
						font-size: .24rem;
						color: #9a9a9a;
					}
				}
				.iconfont{
					position: absolute;
					right:.3rem;
					bottom: .2rem;
				}
			}
		}
		.price-content{
			overflow: hidden;
			padding: 0 .3rem;
			background: #fff;
			.price-item{
				display: flex;
				height: .9rem;
				line-height: .9rem;
				.title{
					flex: 1;
				}
				.price-num{
					text-align: right;
					min-width: 1rem;
					color: #9a9a9a;
				}
			}
		}
		.btn{
			height: 1.2rem;
			line-height: 1.2rem;
			text-align: center;
			color: #ff1351;
			background: #fff;
		}
		.btn-add{
			margin-top: .2rem;
		}
		.confirm-btn{
			height: 1.25rem;
			background: #ff1351;
			font-size: .4rem;
			text-align: center;
			line-height: 1.25rem;
			color: #fff;
		}
	}
</style>